{% extends "base.html" %}

{% block css %}
    <style>
        .table-color {
            border: #1a1e21 solid 1px;
            padding: 5px;
            height: 1.5em;
        }

    </style>
{% endblock %}

{% block main %}
    {#    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">#}
    {#        <h1 class="h2">Dashboard</h1>#}
    {#        <div class="btn-toolbar mb-2 mb-md-0">#}
    {#            <div class="btn-group me-2">#}
    {#                <button type="button" class="btn btn-sm btn-outline-secondary">Share</button>#}
    {#                <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>#}
    {#            </div>#}
    {#            <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">#}
    {#                <span data-feather="calendar"></span>#}
    {#                This week#}
    {#            </button>#}
    {#        </div>#}
    {#    </div>#}

    <div class="row justify-content-center">
        <div class="col d-sm-block d-md-none">
            <canvas class="my-4 w-100" id="Chart1" width="900" height="380"></canvas>
        </div>
        <div class="col-6 d-none d-sm-none d-md-block">
            <canvas class="my-4 w-100" id="Chart2" width="900" height="380"></canvas>
        </div>
        {#        <div class="col d-none d-sm-none d-md-block">#}
        {#            <canvas class="my-4 w-100" id="Chart3" width="900" height="380"></canvas>#}
        {#        </div>#}
    </div>

    {#    <h2>Section title</h2>#}
    <div class="table-responsive">
        <table class="table table-striped table-sm">
            <thead>
            <tr>
                <th class="multiChk d-none">
                    <input id="chkAll" class="form-check-input need-check-delete" type="checkbox">
                </th>
                <th>#</th>
                <th nowrap="nowrap">名称</th>
                <th nowrap="nowrap">规格</th>
                <th nowrap="nowrap">颜色</th>
                <th nowrap="nowrap">库存</th>
                </th>
            </tr>
            </thead>
            <tbody>
            {% if obj_list %}
                {% for obj in obj_list %}
                    {% for o in obj %}
                        <tr>
                            <td>{{ forloop.counter }}</td>
                            <td>{{ o.name }}</td>
                            <td>{{ o.spec }}</td>
                            <td>
                                <div class="row justify-content-start ms-1">
                                    <div class="table-color"
                                         style="background-color: {{ o.color }}; border-radius: 0.2em; width: 2em">
                                    </div>
                                </div>
                            </td>
                            <td>{{ o.stock }}</td>
                        </tr>
                    {% endfor %}
                {% endfor %}
            {% endif %}
            </tbody>
        </table>
    </div>
{% endblock %}

{% block javascript %}
    {#    {{ block.super }}#}
    <script>

        (function () {
            'use strict'

            // Graphs
            var ctx = document.getElementById('Chart1')
            var data = [
                {% for s in statistic_list %}
                    {
                        value: {{ s.stock }},
                        color: "#F7464A",
                        highlight: "#FF5A5E",
                        label: "{{ s.name }}"
                    },
                {% endfor %}
            ]


            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: [
                        {% for s in statistic_list %}
                            '{{ s.name }}',
                        {% endfor %}
                    ],
                    datasets: [{
                        label: '统计',
                        data: [
                            {% for s in statistic_list %}
                                {{ s.stock }},
                            {% endfor %}
                        ],
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    },
                }
            })

            var ctx = document.getElementById('Chart2')
            var data = [
                {% for s in statistic_list %}
                    {
                        value: {{ s.stock }},
                        color: "#F7464A",
                        highlight: "#FF5A5E",
                        label: "{{ s.name }}"
                    },
                {% endfor %}
            ]


            var myChart = new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: [
                        {% for s in statistic_list %}
                            '{{ s.name }}',
                        {% endfor %}
                    ],
                    datasets: [{
                        label: '统计',
                        data: [
                            {% for s in statistic_list %}
                                {{ s.stock }},
                            {% endfor %}
                        ],
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    },
                }
            })

        })()
    </script>
{% endblock %}

{% block set_curPage %}
    curPage = document.getElementById("general")
{% endblock %}